<template>
  <div class="sidebar">
    <el-menu
      default-active="功能"
      router
      :collapse="isCollapse"
      class="el-menu-vertical"
      @select="handleSelect"
    >


      <div style="border-bottom: 1px solid #eeeeee;height:60px;box-shadow: 2px 2px 4px #808080;line-height: 57px;">
        <img v-if="! this.isCollapse" src="../../assets/logo2.png" style="width:50px;margin:10px;">

        <span style="font-size:30px;float:right;">   
       
          <i :class="collapseicon" @click="collapse"></i>
        </span>
      </div>
      <template v-for="item in menus">
        <el-menu-item
          v-if="!item.children || !item.children.length"
          :key="item.id"
          :index="item.name"
          :route="{path:item.url}"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        <el-submenu v-else :key="item.id" :index="item.name">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item
              v-if="!child.children || !child.children.length"
              :key="child.id"
              :index="child.name"
              :route="{path:child.url}"
              style="min-width:100%"
            >
              <i :class="child.icon"></i>
              <span slot="title">{{child.name}}</span>
            </el-menu-item>
            <el-submenu v-else :key="child.id" :index="child.name">
              <template slot="title">
                <i :class="child.icon"></i>
                <span>{{child.name}}</span>
              </template>
              <el-menu-item
                v-for="subchild in child.children"
                :key="subchild.id"
                :index="subchild.name"
                :route="{path:subchild.url}"
                style="min-width:100%"
              >
                <i :class="subchild.icon"></i>
                <span slot="title">{{subchild.name}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "mySidebar",
  data() {
    return {
      isCollapse: false
    };
  },
  computed: {
    menus() {
      return this.$store.state.sidebar.menus;
    },
    collapseicon() {
      return this.isCollapse ? "el-icon-d-arrow-right" : "el-icon-d-arrow-left";
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      this.$store.commit("setIndexPath", indexPath);
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style scoped>
.el-submenu:hover{
  color:#3f97e9
}

.sidebar {
  height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}

.el-menu-vertical.el-menu--collapse {
  height: 100%;
}

/* 
.sidebar-logo-link {
    height: 100%;
    width: 100%;
}
.sidebar-logo {
      width: 40px;
      height:40px;
      vertical-align:middle;
      margin-right: 12px;
}

    .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    } */

</style>

